<#include "/layout/layout.ftl"/>
<@body>
<!-- Morris.js charts -->
<link rel="stylesheet" href="/lib/adminLte-2.4.5/morris.js/morris.css">
<script src="/lib/adminLte-2.4.5/raphael/raphael.min.js"></script>

<script src="/lib/adminLte-2.4.5/morris.js/morris.min.js"></script>
<!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            仪表盘
            <small>Control panel</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
        </ol>
    </section>
<section class="content">
    <div class="row">
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>${componentCount!}</h3>
                    <p>测试组件</p>
                </div>
                <div class="icon">
                    <i class="ion ion-bag"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>${testCaseCount!}<sup style="font-size: 20px"></sup></h3>
                    <p>测试用例</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>${userCount!}</h3>

                    <p>用户数</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-red">
                <div class="inner">
                    <h3>${testPlanCount!}</h3>

                    <p>测试计划</p>
                </div>
                <div class="icon">
                    <i class="ion ion-pie-graph"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
    </div>
    <div class="row">
        <!-- Left col -->
        <section class="col-lg-7 connectedSortable">
            <!-- Custom tabs (Charts with tabs)-->
            <div class="nav-tabs-custom">
                <!-- Tabs within a box -->
                <ul class="nav nav-tabs pull-right">
                    <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
                    <li class="pull-left header"><i class="fa fa-inbox"></i>构建趋势</li>
                </ul>
                <div class="tab-content no-padding">
                    <!-- Morris chart - Sales -->
                    <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
                    <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
                </div>
            </div>


        </section>
        <!-- /.Left col -->
        <!-- right col (We are only adding the ID to make the widgets sortable)-->
        <section class="col-lg-5 connectedSortable">



            <!-- solid sales graph -->
            <div class="box box-solid bg-teal-gradient">
                <div class="box-header">
                    <i class="fa fa-th"></i>

                    <h3 class="box-title">测试通过率</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body border-radius-none">
                    <div class="chart" id="line-chart" style="height: 250px;"></div>
                </div>

            </div>
            <!-- /.box -->



        </section>
        <!-- right col -->
    </div>
</section>
<script>
        <#if buildMetricList??>
        var data=[];
            <#list buildMetricList as buildMetric>
            var obj ={};
            obj.day ="${buildMetric.day?date('yyyy-MM-dd')}";
            obj.number=${buildMetric.number};
            obj.passRate="${buildMetric.passRate?default(0)?string.percent}";
            data.push(obj);
            </#list>
        var area = new Morris.Area({
            element   : 'revenue-chart',
            resize    : true,
            data      : data,
            xkey      : 'day',
            ykeys     : ['number'],
            labels    : ['构建次数'],
            lineColors: ['#a0d0e0', '#3c8dbc'],
            hideHover : 'auto'
        });
    var line = new Morris.Line({
        element          : 'line-chart',
        resize           : true,
        data             : data,
        xkey             : 'day',
        ykeys            : ['passRate'],
        labels           : ['测试用例通过率'],
        lineColors       : ['#ca7def'],
        lineWidth        : 2,
        hideHover        : 'auto',
        gridTextColor    : '#fff',
        gridStrokeWidth  : 0.4,
        pointSize        : 4,
        pointStrokeColors: ['#efefef'],
        gridLineColor    : '#efefef',
        gridTextFamily   : 'Open Sans',
        gridTextSize     : 10
    });
        </#if>
</script>
</@body>